import React, { Component } from 'react';
import './biaodanzujian.css'
const activityArr = [
  {
    label: '线上活动',
    name: '线上活动',
    checked: false
  },
  {
    label: '推广类',
    name: '推广类',
    checked: false
  },
  {
    label: '线下活动',
    name: '线下活动',
    checked: false
  },
  {
    label: '品牌介绍',
    name: '品牌介绍',
    checked: false
  }
]
class DemoFormm extends Component {
  constructor() {
    super();
    this.state = {
      city: '邯郸', //城市
      date: '',//日期
      time: '',//时间
      tel: '',//手机号
      present: '',//目前职业
      shop: '淘宝',//商铺
      content: '',//内容
      isShowSwitch: false, //开关
      textSwitch: '不允许',//开关
      arrCheck:[] //复选框数组
    }
  }
  // 城市改变
  cityChange = (e) => {
    this.setState({
      city: e.target.value
    })
  }
  // 日期改变
  dateChange = (e) => {
    this.setState({
      date: e.target.value
    })
  }
  // 时间改变
  timeChange = (e) => {
    this.setState({
      time: e.target.value
    })
  }
  // 手机号改变
  telChange = (e) => {
    this.setState({
      tel: e.target.value
    })
  }
  // 职业改变
  presentChange = (e) => {
    this.setState({
      present: e.target.value
    })
  }
  // 单选框改变
  radioChange = (e) => {
    this.setState({
      shop: e.target.value
    })
  }
  // 内容
  contentChange = (e) => {
    this.setState({
      content: e.target.value
    })
  }
  // 复选框改变
  checkboxChange = (e, index) => {
    if (e.target.type === 'checkbox') {
      activityArr[index].checked = !activityArr[index].checked
    }
    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value
    })
    let arr=[]
    activityArr.map((item,index)=>{
      if(item.checked===true){
        arr.push(item)
      }else{
        arr.splice(index,1)
      }
      return ''
    })
    this.setState({
      arrCheck:arr
    })
  }
  // 切换
  ChangeSwicth = () => {
    if (!this.state.isShowSwitch) {
      this.setState({
        isShowSwitch: true,
        textSwitch: '允许'
      })
    } else {
      this.setState({
        isShowSwitch: false,
        textSwitch: '不允许'
      })
    }
  }
  // 恢复默认
  recover = () => {
    this.setState({
      city: '邯郸', //城市
      date: '',//日期
      time: '',//时间
      tel: '',//手机号
      present: '',//目前职业
      shop: '淘宝',//商铺
      content: '',//内容
      isShowSwitch: false, //开关
      textSwitch: '不允许',
      arrCheck:[]
    })
  }
  // 提交
  Submit = (e) => {
    e.preventDefault()
    console.log(this.state);
    this.recover()
  }
  // 重置
  reset = () => {
    this.recover()
  }
  render () {
    return (<>
      <form action="" className='form' onSubmit={this.Submit}>
        <div className='item'>
          活动名称：<input type="text" placeholder='前端前景技术发展交流' disabled="disabled" className='title' />
        </div>
        <div className='city'>
          城市：<select value={this.state.city} onChange={this.cityChange} className="selectCity">
            <option value="邯郸">邯郸</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
          </select>
        </div>
        <div className='date'>
          日期：<input type="date" className='dateinp' value={this.state.date} onChange={this.dateChange} /> 一 <input type="time" className='sponsorsponsor' value={this.state.time} onChange={this.timeChange} />
        </div>
        <div className='applyTel'>
          报名电话：<input type="text" placeholder='请输入报名电话' className='tel' value={this.state.tel} onChange={this.telChange} />
        </div>
        <div className="acti-switch">
          <span> 电话沟通: </span>
          <div
            onClick={this.ChangeSwicth}
            className={!this.state.isShowSwitch ? 'isShow2' : 'isShow'}
          >
            <div></div>
          </div>
        </div>
        <div className='present'>
          目前职业：<input type="text" className='occupation' placeholder='请输入目前职业' value={this.state.present} onChange={this.presentChange} />
        </div>
        <div className='activity'>
          活动类型：
          <div className='right'>
            {activityArr.map((item, index) => {
              return (
                <label key={index} className="label">
                  <input type="checkbox" name={item.name} checked={item.checked} onChange={(e) => this.checkboxChange(e, index)} /> {item.label}
                </label>
              )
            })}
          </div>
        </div>
        <div className='sponsor'>
          活动赞助商: <input type="radio" value='淘宝' checked={this.state.shop === '淘宝'} onChange={this.radioChange} /> 淘宝
          <input type="radio" className='jd' value='京东' checked={this.state.shop === '京东'} onChange={this.radioChange} /> 京东
        </div>
        <div className='describe'>
          描述: <textarea className='content' value={this.state.content} onChange={this.contentChange}></textarea>
        </div>
        <button className='submit'>提交</button>
        <button className='reset' onClick={this.reset}>重置</button>
      </form>
    </>)
  }
}

export default DemoFormm;